<template>
    <div class="alumni-grid">
        <div v-for="alumni in alumniList" :key="alumni.id" class="alumni-card">
            <el-avatar :size="60" :src="alumni.avatar" class="alumni-avatar">
                {{ alumni.name.charAt(0) }}
            </el-avatar>
            <div class="alumni-info">
                <h3>{{ alumni.name }}</h3>
                <p class="alumni-major">{{ alumni.major }} · {{ alumni.grade }}</p>
                <p class="alumni-company">{{ alumni.company }} · {{ alumni.position }}</p>
            </div>
            <el-button type="primary" text @click="followAlumni(alumni.id)">
                {{ alumni.isFollowing ? '已关注' : '关注' }}
            </el-button>
        </div>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'

defineProps({
    alumniList: {
        type: Array,
        default: () => []
    }
})

const followAlumni = (alumniId) => {
    ElMessage.success(`关注校友: ${alumniId}`)
}
</script>

<style scoped>
.alumni-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.alumni-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    transition: all 0.3s;
}

.alumni-card:hover {
    border-color: #409EFF;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.alumni-info {
    flex: 1;
}

.alumni-info h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
    color: #303133;
}

.alumni-major,
.alumni-company {
    margin: 2px 0;
    font-size: 12px;
    color: #909399;
}
</style>